import CloseImg from './image/close.svg'
import OnLineDevImg from './image/on_line_dev.png'
import OffLineDevImg from './image/off_line_dev.png'
import SSDataImg from './image/ssData.svg'

// 创建信息窗口内容函数
export const createInfoWinContent = (dev, editDevCoordinateClick) => {
  let infoWinContent

  const editClick = () => {
    editDevCoordinateClick(dev)
  }

  infoWinContent = `
       <div class='map_dev_win_info_box'>
         <div class='title_box'>
            <img class='dev_status_img' src=${
              dev.devStatus == '在线' ? OnLineDevImg : OffLineDevImg
            } />
            <span class='dev_name'>${dev.devName}</span>
         </div>
         <div class='base_info_box'>
            <div class='info_item_box'>
              <span class='label'>设备ID</span>
              <span class='value'>${dev.devId}</span>
            </div>
            <div class='info_item_box'>
              <span class='label'>设备编码</span>
              <span class='value'>${dev.devGId}</span>
            </div>
            <div class='info_item_box'>
              <span class='label'>设备经度</span>
              <span class='value'>${dev.lng}</span>
            </div>
            <div class='info_item_box'>
              <span class='label'>设备纬度</span>
              <span class='value'>${dev.lat}</span>
            </div>
            <div class='info_item_box'>
              <span class='label'>检测时间</span>
              <span class='value'>${dev.checkDataRsp.checkTime}</span>
            </div>

            <div class='edit_zb_box'>
              <div class='edit_zb_btn' data-devId='${
                dev.devId
              }' onclick='editClick()'>修改坐标</div>          
            </div>
         </div>

         <div class='param_info_box'>
            <div class='title_t_box'>
               <img src=${SSDataImg} class='ss_data_img'  />
               <span class='title_text'>实时数据</span>
            </div>
            <div class="ss_data_content_box">
              ${createSSDataParamItem(dev.checkDataRsp.checkDataList)}
            </div>
         </div>
       </div>
`

  return infoWinContent
}

// 创建实时数据参数项
const createSSDataParamItem = list => {
  let rEl = ''
  // 判断参数列表是否为空、
  if (list && list.length != 0) {
    list.forEach((param, indexP) => {
      rEl += `
      <div class='data_item_box'>
        <div class='left_box'>
          <span class='param_name'>${param.checkDataName}:</span>
          <span class='value'>${param.checkDataValue}</span>
          <span class='unit'>${param.checkDataUnit}</span>
        </div>
        <div class='right_box'>
          <span class='${compParamStatusClass(param.paramStatus)}'>${param.paramStatus}</span>
        </div>
      </div>
      `
    })
  } else {
    rEl = `
    <div class="not_data_box">
      <span class='not_data_text'>暂无数据</span>
    </div>`
  }

  return rEl
}

// 计算参数状态类名
const compParamStatusClass = status => {
  let classN = 'param_status '
  if (status == '适宜') {
    classN += 'shiyi'
  } else if (status == '偏高') {
    classN += 'piangao'
  } else if (status == '偏低') {
    classN += 'piandi'
  }

  console.log(classN)

  return classN
}
